<!--
 * @author  dumeng
 评分设置
-->
<template>
  <div class="news-set">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="state"
      title="设置"
      center
      :before-close="handleCancel"
    >
      <el-form ref="form" :model="form">
        <el-form-item label="评分状态">
          <el-radio-group v-model="form.evaluateState">
            <el-radio v-if="type === 'single'" :label="-1">与活动一致</el-radio>
            <el-radio :label="0">不允许评分</el-radio>
            <el-radio :label="1">允许评分</el-radio>
          </el-radio-group>
          <div>
            <el-button type="primary" style="padding: 8px 30px;" @click="handleComit('evaluateState')">确 认</el-button>
          </div>
        </el-form-item>
        <el-form-item label="点赞状态">
          <el-radio-group v-model="form.favorState">
            <el-radio v-if="type === 'single'" :label="-1">与活动一致</el-radio>
            <el-radio :label="0">不允许点赞、不允许踩</el-radio>
            <el-radio :label="1">允许点赞、不允许踩</el-radio>
            <el-radio :label="2">允许点赞和踩</el-radio>
          </el-radio-group>
          <div>
            <el-button type="primary" style="padding: 8px 30px;" @click="handleComit('favorState')">确 认</el-button>
          </div>
        </el-form-item>
        <el-form-item label="评论状态">
          <el-radio-group v-model="form.commentState" style="width: 600px;">
            <el-row>
              <el-col v-if="type === 'single'" :span="12">
                <el-radio :label="-1">与活动一致</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio :label="0">不允许评论（不展示已有评论）</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio :label="1">不允许评论（展示已有评论）</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio :label="2">允许评论（不需要审核）</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio :label="3">允许评论（需要审核）</el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
          <div>
            <el-button type="primary" style="padding: 8px 30px;" @click="handleComit('commentState')">确 认</el-button>
          </div>
        </el-form-item>
        <el-form-item
          v-if="type ==='multi'"
          label="获奖作品发布状态"
        >
          <el-radio-group v-model="form.isAward">
            <el-radio label="0">取消发布</el-radio>
            <el-radio label="1">发布</el-radio>
          </el-radio-group>
          <div>
            <el-button type="primary" style="padding: 8px 30px;" @click="handleComit('isAward')">确 认</el-button>
          </div>
        </el-form-item>
        <el-form-item
          v-if="type ==='multi'"
          label="作品重复获奖"
        >
          <el-radio-group v-model="form.worksRepeatWin">
            <el-radio label="1">可以</el-radio>
            <el-radio label="0">不可以</el-radio>
          </el-radio-group>
          <div>
            <el-button type="primary" style="padding: 8px 30px;" @click="handleComit('worksRepeatWin')">确 认</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { update } from '../api/index'
import { setWorksEvaluateState, setWorksFavorState, setWorksCommentState } from '../api/works'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'NewsSet',
  directives: { elDragDialog },
  props: {
    type: {
      type: String,
      default: 'single'
    },
    id: {
      type: String,
      default: ''
    },
    obj: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        evaluateState: '',
        favorState: '',
        commentState: '',
        isAward: '',
        worksRepeatWin: '1'
      },
      state: true
    }
  },
  created() {
    if (this.type === 'single') {
      for (const i in this.form) {
        this.form[i] = this.obj[i]
      }
    } else if (this.type === 'multi') {
      this.form.evaluateState = this.obj.worksEvaluateState
      this.form.favorState = this.obj.worksFavorState
      this.form.commentState = this.obj.worksCommentState
      this.form.isAward = this.obj.isAward
      this.form.worksRepeatWin = this.obj.worksRepeatWin || '0'
    }
  },
  methods: {
    handleComit(key) {
      if (this.form[key] !== '') {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        if (this.type === 'single') {
          const params = {
            id: this.id
          }
          params['status'] = this.form[key]
          if (key === 'evaluateState') {
            setWorksEvaluateState(params).then(res => {
              loading.close()
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
              }
            }).catch(() => {
              loading.close()
            })
          } else if (key === 'favorState') {
            setWorksFavorState(params).then(res => {
              loading.close()
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
              }
            }).catch(() => {
              loading.close()
            })
          } else if (key === 'commentState') {
            setWorksCommentState(params).then(res => {
              loading.close()
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
              }
            }).catch(() => {
              loading.close()
            })
          }
        } else {
          const query = {
            id: this.id
          }
          if (key === 'evaluateState') {
            query['worksEvaluateState'] = this.form[key]
          } else if (key === 'favorState') {
            query['worksFavorState'] = this.form[key]
          } else if (key === 'commentState') {
            query['worksCommentState'] = this.form[key]
          } else if (key === 'isAward') {
            query[key] = this.form[key]
          } else if (key === 'worksRepeatWin') {
            query[key] = this.form[key]
          }
          update(query).then(res => {
            loading.close()
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            }
          }).catch(() => {
            loading.close()
          })
        }
      }
    },
    handleCancel() {
      this.$emit('closeSet')
    }
  }
}
</script>

<style lang="scss">
.news-set {
  .el-select {
    width: 300px;
    margin-right: 20px;
  }

  .el-col {
    margin-bottom: 10px;
  }
}
</style>
